<template>
  <div>
    <!-- 注册局部组件 -->
    <ComponentA />
    <ComponentB />
    <!-- 或者 -->
    <component-a />
    <component-b />
    <!-- 或者 -->
    <ComponentA></ComponentA>
    <ComponentB></ComponentB>
    <component-a></component-a>
    <component-b></component-b>
    <hr />
    <!-- 组件全局注册 -->
    <global-com />
    <global-use />
    <div>value:{{ value }}</div>
    <button @click="handClick">改变value的值</button>
  </div>
</template>
<!-- 
  beforeCreate：在实例被创建之前调用。
created：在实例创建完成后立即调用。
beforeMount：在挂载开始之前调用。
mounted：在挂载完成后调用。
beforeUpdate：在数据更新之前调用。
updated：在数据更新之后调用。
beforeUnmount：在卸载之前调用。
unmounted：在卸载之后调用。
————————————————
原文链接：https://blog.csdn.net/duckiamduck/article/details/130980897
 -->
<!-- <script>
import ComponentA from './components/component-a.vue'
import ComponentB from './components/ComponentB.vue'
 export default {
  name: 'zujian',
  components: { ComponentA, ComponentB },
  data() {
    return {
      value: 1
    }
  },
  methods: {
    handClick() {
      this.value = 2
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }
}
</script>
 -->
<!-- 
  setup：在组件实例化之前调用。在setup函数中可以设置响应式状态、引入其他模块等。
onBeforeMount：在组件挂载之前调用。
onMounted：在组件挂载之后调用。
onBeforeUpdate：在组件更新之前调用。
onUpdated：在组件更新之后调用。
onBeforeUnmount：在组件卸载之前调用。
onUnmounted：在组件卸载之后调用。
  -->
<script setup>
defineOptions({
  name: 'zujian'
})
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
const value = ref(1)
// 注册局部组件
import ComponentA from './components/component-a.vue'
import ComponentB from './components/ComponentB.vue'
function handClick() {
  value.value = 2
}
onBeforeMount(() => {
  console.log('beforeMount')
})
onMounted(() => {
  console.log('mounted')
})
onBeforeUpdate(() => {
  console.log('beforeUpdate')
})
onUpdated(() => {
  console.log('updated')
})
onBeforeUnmount(() => {
  console.log('beforeUnmount')
})
onUnmounted(() => {
  console.log('unmounted')
})
</script>
